import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  ref,
  watch,
} from "vue";
import { useIpApi } from "../api/ip";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";

const IpCard = defineComponent({
  name: "IpCard",
  props: {
    data: {
      type: Object as PropType<TIpCard>,
      required: true,
    },
  },

  emits: ["modify"],

  setup(props, { attrs, emit }) {
    const data = computed(() => props.data);

    const status = () => {
      let statusAttr = "bg-gray-400";
      if (data.value.enable) {
        if (data.value.status) {
          statusAttr = "bg-green-500";
        } else {
          statusAttr = "bg-red-500";
        }
      }

      return (
        <>
          <div class={`w-5 h-5 ${statusAttr} rounded-full ml-2 `}></div>
        </>
      );
    };


    // outline outline-offset-2 outline-blue-500
    const statusColor = () => {
      let statusAttr = "outline-gray-500";
      if (data.value.enable) {
        if (data.value.status) {
          statusAttr = "outline-green-500";
        } else {
          statusAttr = "outline-red-500";
        }
      }

      return statusAttr
    };


    const modifyIp = (data: TIpCard) => {
      emit("modify", data);
    };

    const deleteIp = (data: TIpCard) => {
      ElMessageBox.confirm("确定删除 ? ")
        .then(() => {
          const url = `${data.url}/${data.id}`;
          axios
            .delete(url)
            .then((response) => {
              if (response.status === 204) {
                ElMessage({
                  showClose: true,
                  message: "删除成功...",
                  type: "success",
                });
              } else {
                ElMessage({
                  showClose: true,
                  message: "删除失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              ElMessage({
                showClose: true,
                message: "删除失败",
                type: "error",
              });
            });
        })
        .catch(() => {
          // catch error
        });
    };

    return () => (
      <>

        <div class={`w-56 h-auto  ${statusColor()} rounded-md m-4 flex flex-col p-1 outline outline-offset-2 outline-8 bg-blue-400`}>

          <div class="flex flex-row justify-between">
            <div class="flex flex-row ml-2 ">
              <div class="h-5 ">状态 : </div>
              {status()}
            </div>

            <div class="mr-2">
              <button
                class="bg-gray-400 rounded-md w-12 h-6 hover:bg-red-300"
                onClick={() => deleteIp(data.value)}
              >
                删除
              </button>
            </div>
          </div>

          <div class="flex flex-row ml-2">
            <span class="mr-2">IP : </span>
            <span>{data.value.ip}</span>
          </div>

          <div class="flex flex-row ml-2">
            <span class="mr-2">名称 : </span>
            <span class="text-sm mt-0.5">{data.value.name}</span>
          </div>


          <div class="flex flex-row ml-2">
            <span class="mr-2">CPE : </span>
            <span>{data.value.cpe.trim() === "" ? "---" : data.value.cpe}</span>
          </div>

          <div class="flex flex-row ml-2">
            <span class="mr-2">地址 : </span>
            <span>{data.value.location}</span>
          </div>

          <div class="flex flex-row ml-2">
            <span class="mr-2">网域 : </span>
            <span>{data.value.domain}</span>
          </div>

          <div class="flex flex-row ml-2">
            <span class="mr-2">MAC : </span>
            <span>{data.value.mac.trim() === "" ? "---" : data.value.mac}</span>
          </div>

          <div class="flex flex-row justify-between mb-1">
            <div class="flex flex-row ml-2">
              <span class="mr-2">延时 : </span>
              <span>{data.value.roundtripTime}ms</span>
            </div>

            <div class="mr-2">
              <button
                class="bg-gray-400 rounded-md w-12 h-6 hover:bg-red-300"
                onClick={() => modifyIp(data.value)}
              >
                编辑
              </button>
            </div>
          </div>



        </div>
      </>
    );
  },
});
export default IpCard;

